<script lang="ts" setup>
import type { DressResourceApi } from '#/api/wedding/dressresource';

import { ref, onMounted } from 'vue';

import { getDressResource } from '#/api/wedding/dressresource';

import { Image, Spin, message } from 'ant-design-vue';

defineOptions({ name: 'MobilePreview' });

const props = defineProps<{
  dressId: string;
}>();

const loading = ref(true);
const dressData = ref<DressResourceApi.DressResource>();

// 加载婚纱数据
async function loadDressData() {
  try {
    loading.value = true;
    const data = await getDressResource(Number(props.dressId));
    dressData.value = data;
  } catch (error) {
    message.error('加载婚纱信息失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  loadDressData();
});

// 格式化状态
function formatStatus(status: string) {
  const statusMap = {
    available: { text: '可用', color: '#52c41a' },
    rented: { text: '租赁中', color: '#1890ff' },
    maintenance: { text: '维护中', color: '#faad14' },
    disabled: { text: '停用', color: '#d9d9d9' },
  };
  return statusMap[status as keyof typeof statusMap] || { text: '未知', color: '#d9d9d9' };
}
</script>

<template>
  <div class="min-h-screen bg-gray-50">
    <Spin :spinning="loading" size="large">
      <div v-if="dressData" class="max-w-md mx-auto bg-white">
        <!-- 头部 -->
        <div class="bg-gradient-to-r from-pink-500 to-purple-600 text-white p-6 text-center">
          <h1 class="text-2xl font-bold mb-2">{{ dressData.dressName || '婚纱详情' }}</h1>
          <p class="text-pink-100">{{ dressData.dressCode || '婚纱编码' }}</p>
        </div>

        <!-- 图片展示 -->
        <div v-if="dressData.images && dressData.images.length > 0" class="p-4">
          <h2 class="text-lg font-semibold mb-3 text-gray-800">婚纱图片</h2>
          <Image.PreviewGroup>
            <div class="grid grid-cols-2 gap-3">
              <div 
                v-for="(image, index) in dressData.images" 
                :key="index"
                class="aspect-square rounded-lg overflow-hidden"
              >
                <Image
                  :src="image"
                  :alt="`婚纱图片${index + 1}`"
                  class="w-full h-full object-cover"
                  :preview="{ mask: '查看大图' }"
                />
              </div>
            </div>
          </Image.PreviewGroup>
        </div>

        <!-- 基本信息 -->
        <div class="p-4">
          <h2 class="text-lg font-semibold mb-3 text-gray-800">基本信息</h2>
          <div class="space-y-3">
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
              <span class="text-gray-600">品牌</span>
              <span class="font-medium">{{ dressData.brand || '未设置' }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
              <span class="text-gray-600">颜色</span>
              <span class="font-medium">{{ dressData.color || '未设置' }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
              <span class="text-gray-600">尺码</span>
              <span class="font-medium">{{ dressData.size || '未设置' }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
              <span class="text-gray-600">款式编号</span>
              <span class="font-medium">{{ dressData.style || '未设置' }}</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
              <span class="text-gray-600">库存数量</span>
              <span class="font-medium">{{ dressData.inventoryCount || 0 }}件</span>
            </div>
            <div class="flex justify-between items-center py-2 border-b border-gray-100">
              <span class="text-gray-600">状态</span>
              <span 
                class="px-3 py-1 rounded-full text-sm font-medium"
                :style="{ 
                  backgroundColor: formatStatus(dressData.status).color + '20',
                  color: formatStatus(dressData.status).color 
                }"
              >
                {{ formatStatus(dressData.status).text }}
              </span>
            </div>
          </div>
        </div>

        <!-- 价格信息 -->
        <div class="p-4 bg-red-50">
          <h2 class="text-lg font-semibold mb-3 text-gray-800">租赁价格</h2>
          <div class="text-center">
            <div class="text-3xl font-bold text-red-600 mb-2">
              ¥{{ dressData.rentalPrice || 0 }}
            </div>
            <div class="text-gray-600">元/天</div>
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="p-4">
          <h2 class="text-lg font-semibold mb-3 text-gray-800">联系我们</h2>
          <div class="bg-blue-50 p-4 rounded-lg text-center">
            <p class="text-blue-800 mb-2">如需租赁或了解更多详情</p>
            <p class="text-blue-600 font-medium">请扫描上方二维码或联系客服</p>
          </div>
        </div>

        <!-- 底部 -->
        <div class="p-4 text-center text-gray-500 text-sm">
          <p>© 2024 婚纱租赁管理系统</p>
        </div>
      </div>
    </Spin>
  </div>
</template>

<style scoped>
/* 移动端优化样式 */
@media (max-width: 768px) {
  .max-w-md {
    max-width: 100%;
  }
}
</style>
